<template>
    <div class="container">
        <!-- 头部 -->
        <div class="messgae-detail-header drag">
            wifi歪f
        </div>
        <!-- 聊天内容容器 -->
        <main ref="mainContent">
            <div class="messgae-content">
                <div class="message-item" v-for="(item, index) in messageList" :key="index">
                    <!-- 消息时间 -->
                    <div class="message-time" v-if="index === 0 ? true : messageList[index - 1].time !== item.time">{{ item.time }}</div>
                    <!-- 自己的消息 -->
                    <div class="message-my" v-if="item.type === 0">
                        <div class="message-text-warp">
                            <div class="message-text my">
                                {{ item.message }}
                            </div>
                        </div>
                        <div class="user-pic">
                            <img src="@/assets/images/user.png" alt="" />
                        </div>
                    </div>
                    <!-- 对方消息 -->
                    <div class="message-friend" v-else>
                        <div class="user-pic">
                            <img src="@/assets/images/user.png" alt="" />
                        </div>
                        <div class="message-text-warp">
                            <div class="message-text friend">
                                {{ item.message }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!-- 底部消息编辑框 -->
        <div class="message-edit-bottom">
            <BottomInput />
        </div>
    </div>
</template>

<script setup lang="ts">
import BottomInput from '@/components/BottomInput/index.vue'
import { nextTick, ref, watch } from "vue";
const messageList:any = ref([
{
		// userId: {
		// 	_id: '645551f3567271fb5c48f8e7',
		// 	nick: '修改后的admin',
		// 	imgUrl: '/1683769367445-1683769127866-IMG_4838.jpeg'
		// },
		/*
			type: 0 => 自己的消息  1 => 对方的消息
			msgType: 0 => 文字消息  1 => 图片消息
		*/
		type: 0,
		time: '2023-08-09 5:20',
		msgType: 0,
		message: '你好，这是我发的第一条消息',
	},
	{
		type: 1,
		time: '2023-08-09 5:20',
		msgType: 0,
		message: '好的，我收到了',
	},
	{
		type: 0,
		time: '2023-08-09 13:14',
		msgType: 0,
		message: 'message 2',
	},
	{
		type: 0,
		time: '2023-08-09 13:14',
		msgType: 0,
		message: 'message 3',
	},
	{
		type: 0,
		time: '2023-08-09 13:14',
		msgType: 0,
		message: 'message 4',
	},
	{
		type: 0,
		time: '2023-08-09 13:14',
		msgType: 0,
		message: 'message 5',
	},
	{
		type: 1,
		time: '2023-08-09 13:15',
		msgType: 0,
		message: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈火狐火狐哈哈哈哈好火狐好好好好 好的',
	}
])

// 获取dom
const mainContent = ref();
watch(messageList, () => {
    nextTick(() => {
        mainContent.value.scrollTop = mainContent.value.scrollHeight
    })
}, { immediate: true })
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .messgae-detail-header {
        width: 100%;
        height: 50px;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-size: 18px;
        border-bottom: 1px solid #e9e9e9;
    }

    .message-edit-bottom {
        width: 100%;
        height: 200px;
        border-top: 1px solid #e9e9e9;
		padding: 10px 15px;
		box-sizing: border-box;
    }
}

main {
    width: 100%;
    flex: 1;
    overflow: auto;

    .messgae-content {
        width: 100%;
        padding: 15px 20px 0;
        box-sizing: border-box;
        .message-item {
			width: 100%;

			.message-time {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-bottom: 20px;
				font-size: 13px;
				color: #b0b0b0;
			}

			.message-my,
			.message-friend {
				width: 100%;
				display: flex;
				margin-bottom: 25px;

				.user-pic {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.message-text-warp {
					margin: 0 10px;

					.message-text {
						max-width: 55vw;
						padding: 10px;
						box-sizing: border-box;
						border-radius: 10px;
                        line-height: 22px;
                        font-size: 15px;
					}

					.friend {
						background-color: #fff;
					}

					.my {
						background-color: #0091ff;
                        color: #fff;
					}
				}
			}

			.message-my {
				justify-content: flex-end;
			}
		}
    }
}
</style>